<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<div class="layui-form">
	<fieldset  class="layui-elem-field" style="padding-top: 20px;">
		<div class="layui-form-item">
			<div class="layui-inline">
		    	<label class="layui-form-label">班级</label>
		    	<div class="layui-input-inline" style="width: 200px;">
		      		<select id="bjSel1" lay-filter="bjSel1" >
		      			<option></option>
		      			<option th:each="bj:${bjs}" th:value="${bj.id}" th:text="${bj.name}">1班</option>
		      		</select>
		    	</div>
		    </div>
		    <div class="layui-inline">
		    	<label class="layui-form-label">课程</label>
		    	<div class="layui-input-inline" style="width:200px;">
		    		<select id="courseSel" lay-filter="courseSel"  onchange="bjChange()">
		    			<option></option>
		    			<option th:each="c:${courses}" th:value="${c.id}" th:text="${c.name}">语文</option>
		    		</select>
		    	</div>
		    </div>
		    <div class="layui-inline">
		    	<button type="button" id="cx" class="layui-btn layui-btn-disabled" disabled="disabled">查询</button>
		    </div>
		</div>
	</fieldset>
</div>
<table id="class_grade_table" lay-filter="class_grade_table"></table>
<script type="text/javascript">
	var $=layui.$;
	var form=layui.form;
	var layer=layui.layer;
	form.render();
	var option={
		elem:'#class_grade_table',
		title:'班级成绩列表',
		path:'grade',
		height:'full-220',
		toolbar: true,
		page:false,
		cols:[
			[
				{field:'stuNum',title:'学号',templet: function(d){return d.stu.username;}},
				{field:'name',title:'姓名',templet: function(d){return d.stu.name;}},
				{field:'grade',title:'成绩',sort: true, edit: 'text' }
			]
		]		
	};
	var classGradeTable=new LayUiTable(option);
	classGradeTable.init();
	$('#cx').click(function(){
		var classId=$('#bjSel1').val();
		var courseId=$('#courseSel').val();
		var table=layui.table;
		table.reload('id',{where:{classId:classId,courseId:courseId}});
	});
	function selChange(){
		var classId=$('#bjSel1').val();
		var courseId=$('#courseSel').val();
		table.reload('id',{where:{classId:''}});
		if(classId&&courseId){
			$('#cx').removeClass('layui-btn-disabled');
			$('#cx').attr('disabled',false);
		}else{
			$('#cx').attr('disabled',true);
			$('#cx').addClass(' layui-btn-disabled');
		}
	}
	form.on('select(bjSel1)', function(data){
		selChange();
	});
	form.on('select(courseSel)',function(data){
		selChange();
	});
	table.on('edit(class_grade_table)', function(obj){
		var gradeId=obj.data.id;
		var value=obj.value;
		if(!/^\+?[1-9][0-9]*$/.test(value)){
			layer.msg('必须输入一个正整数');
			return;
		}
		$.post('grade/update',{id:gradeId,grade:value});
	});
</script>
</body>
</html>